<template >
  <div class="my-header">
    <div class="center_outer">
      <img src="../assets/logo.png" width="104px"  alt="" @click="to_home" />
      <div class="top_nav2">
        <div class="top_search" v-show="hidden != register && hidden != login">
          <div class="top_searchbox input_01">
            <div :class="`top_nav ${active4}`">
              <!-- text-color="#000" -->
              <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                active-text-color="#ff6e6e"
              >
                <el-menu-item index="1" @click="to_home">首页</el-menu-item>

                <el-menu-item index="2" @click="to_product"
                  >手办Logo</el-menu-item
                >
                <el-menu-item index="3" @click="to_logistics"
                  >我要国际快递&nbsp;(转运)</el-menu-item
                >
                <el-menu-item index="4" @click="to_cart">购物车</el-menu-item>

                <el-menu-item index="5" @click="to_help">
                  帮助中心
                </el-menu-item>
                <el-submenu index="6">
                  <template slot="title"
                    ><router-link to="/aboutus"><span @click="to_aboutus" style="font-size:16px;">关于我们</span></router-link></template
                  >
                  <el-menu-item index="6-1"><router-link to="/aboutus/web">网站地图</router-link></el-menu-item>
                  <el-menu-item index="6-2"
                    ><router-link to="/aboutus/greement">
                      服务协议</router-link
                    ></el-menu-item
                  >
                  <el-menu-item index="6-3"
                    ><router-link to="/aboutus/links"
                      >友情链接</router-link
                    ></el-menu-item
                  >
                  <el-menu-item index="6-4"><router-link to="/aboutus/job">加入我们</router-link></el-menu-item>
                </el-submenu>
              </el-menu>
            </div>

            <div :class="active3">
              <!--  margin-left:148px; -->
              <input
                type="text"
                style="
                  width: 800px;
                  height: 40px;
                  padding: 0 20px;
                  border-radius: 50px;
                  border: none;
                  background-color: #f5f5f2;
                  line-height: 48px;
                  margin-left: 790px;
                  outline: none;
                "
                placeholder="粘贴您需要代购的商品链接或输入商品名称"
                v-model="content"
              />
            </div>
          </div>

          <div v-if="active7" :class="`sea`" @click="sbtn">
            <i :class="`el-icon-search`"></i>
            <span class="zi1">搜索</span>
          </div>
  
          <div v-if="active6" :class="`sea active1`" @click="sbtn3">
            <i :class="`el-icon-search active2`"></i>
            <span class="zi1">搜索</span>
          </div>
        </div>
        
        <!-- 登陆注册 -->
        <el-row
          v-show="hidden != register && hidden != login && pd"
          style="margin-top: 3px"
          class="but_02"
          @click.native="to_login"
        >
          <el-button type="danger" plain round size="small"
            >登陆/免费注册</el-button
          >
        </el-row>
        <!-- 已经账号了 -->
        <el-row
          v-show="hidden == register"
          style="margin-top: 3px"
          class="but_02"
          @click.native="to_login"
        >
          <span style="font-size: 14px">已经有账号 &nbsp;</span>
          <el-button type="danger" plain round size="small">马上登陆</el-button>
        </el-row>

        <!-- 头像 -->
        <div class="tx_01">
          <div class="demo-image__preview" v-show="$store.state.login_state">
            <el-image
              style="width: 30px; height: 30px; border-radius: 100px"
              :src="url"
              :preview-src-list="srcList"
            >
            </el-image>
            <span @click="to_gr">{{ $store.state.uname}}</span>
          </div>
        </div>
      </div>
    </div>
    <div :class="bj_01" @click="sbtn2"></div>
  </div>
</template>

<script src="../assets/shijian.js"></script>
<script>
import { extendDefaults } from "swiper";
export default {
  // created(){
  //   this.$bus.$on('pan_duan',pan_duan())
  //   },
  data() {
    return {
      activeIndex: "1",
      input: "",
      // 表头大透明背景
      bj_01: "",
      // 动画属性
      active1: "",
      active2: "",
      active3: "",
      active4: "",
      active5: "",
      active6: false,
      active7: true,
      // 页面地址
      tabSelected: this.$route.path,
      // 路由地址
      product: "goods",
      logistics: "logistics",
      cart: "cart",
      help:'help',
      aboutus: "aboutus",
      register: "register",
      login: "login",
      goods:'goods',
      personal:'personal',
      // 登录状态
      pd: null,
      // 页面路径
      hidden: "",
      // 搜索框内容
      content:'',

      // 图片1： 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      // 图片大图预览
      srcList: ["https://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20190420/7e41d12ff77f4fc9ba5771a5872c9b80.jpeg"],
    };
  },
  mounted() {
    this.$router.onReady(() => {
      if (this.$route.path == this.tabSelected) {
        this.activeIndex = "1";
      }
      if (this.$route.path.split("/").pop() == this.product) {
        // console.log(this.$route.path.split("/").pop());
        this.activeIndex = "2";
      }
      if (this.$route.path.split("/").pop() == this.logistics) {
        // console.log(this.$route.path.split("/").pop());
        this.activeIndex = "3";
      }
      if (this.$route.path.split("/").pop() == this.cart) {
        // console.log(this.$route.path.split("/").pop());
        this.activeIndex = "4";
      }
      if (this.$route.path.split("/").pop() == this.help) {
        // console.log(this.$route.path.split("/").pop());
        this.activeIndex = "5";
      }
      if (this.$route.path.split("/").pop() == this.aboutus) {
        // console.log(this.$route.path.split("/").pop());
        this.activeIndex = "0";
      }

      // 把页面路径赋给hidden
      this.hidden = this.$route.path.split("/").pop();
    });

    // console.log('图片地址',this.$store.state.head_photo);
    // console.log('头像',this.url);

    // 如果$store.state.head_photo里的内容不是的则赋给url
    // 'https://pic.imoe.pw/2022/10/15/f7f6d58558d65.png'
    // 判断头像图片存进浏览器是否为空
    if (this.$store.state.head_photo != null) {
      // 把存入浏览器临时存储的头像赋给 头像属性url
      this.url = this.$store.state.head_photo;
      // 把存入浏览器临时存储的预览头像赋给 预览头像数组srcList
      this.srcList.push(
        this.$store.state.head_photo,
        "https://www.tanmizhi.com/img/allimg/05/19-1Z5091Q306.jpg"
      );
    } else {
      this.url =
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg";
    }
    console.log("存储在浏览器登录状态", this.$store.state.login_state);
    console.log("登录状态pd", this.pd);

    //判断$store.state.login_state是否为空
    if (this.$store.state.login_state == null) {
      this.pd = true;
    } else {
      this.pd = false;
    }
  },
  methods: {
    // 未激活搜索按钮点击事件
    sbtn() {
      this.active1 = "active1";
      this.active2 = "active2";
      this.active3 = "active3";
      this.active4 = "active4";
      this.active5 = "active5";
      this.bj_01 = "bj_01";
      // 未激活搜索按钮为true
      this.active6=true
      // 激活搜索按钮为false
      this.active7=false
    }, 
    // 表头随意点击处
    sbtn2() {
      // console.log(123);
      this.active4 = "active5";
      this.active1 = "";
      this.active2 = "";
      this.active3 = "";
       this.active6=false
      this.active7=true
    },
  // 激活后的搜索按钮点击事件
    sbtn3(){ 
       if(this.content=='' && this.$route.path.split("/").pop() !== this.goods){ 
        this.$router.push('/goods')
        this.sbtn2()
        this.activeIndex='2'
      }
    },
    // 导航栏点击跳转
    to_home() {
      // console.log(this.tabSelected, "==", this.$route.path);
      if (this.tabSelected != this.$route.path) {
        this.$router.push("/");
        this.hidden = this.$route.path;
      }
    },
    to_product() {
      if (this.$route.path.split("/").pop() != this.product) {
        this.$router.push(`/${this.product}`);
        this.hidden = this.product;
      }
    },
    to_logistics() {
      if (this.$route.path.split("/").pop() != this.logistics) {
        this.$router.push(`/${this.logistics}`);
        this.hidden = this.logistics;
      }
    },

    to_cart() {
      if (this.$route.path.split("/").pop() !== this.cart) {
        this.$router.push(`/${this.cart}`);
        this.hidden = this.cart;
      }
    },
    to_help() {
      if (this.$route.path.split("/").pop() !== this.help) {
        this.$router.push(`/${this.help}`);
        this.hidden = this.help;
      }
    },
    to_aboutus() {
      this.activeIndex = "0";
      console.log(111);
      // if (this.$route.path.split("/").pop() !== this.aboutus) {
      //   this.$router.push(`/${this.aboutus}`);
      //   this.hidden = this.aboutus;
      // }
    },
    to_register() {
      if (this.$route.path.split("/").pop() !== this.register) {
        this.$router.push(`/${this.register}`);
      }
    },
    to_login() {
      if (this.$route.path.split("/").pop() !== this.login) {
        this.$router.push(`/${this.login}`);
      }
    },
    to_gr(){
      if (this.$route.path.split("/").pop() !== this.personal) {
        this.$router.push(`/${this.personal}`);
      }
      this.activeIndex='0';
    }

  },
  watch: {
    // hidden(newValue, oldValue) {
    //    console.log('更新前：',newValue, '更新后：',oldValue)
    // },
    pd(newValue, oldValue) {
      console.log("更新前：", newValue, "更新后：", oldValue);
      //  this.pd=newValue
    },

    // 路由发生变化
   '$route'(to, from){
    //  console.log(to, from);
      // 路由发生变化页面刷新
      //  this.$router.go(0);
      // console.log(to.path.split('/').pop(), from)
      // 把路由变化给属性hidden
      this.hidden = to.path.split("/").pop();
    },

    // 监听$store.state.head_photo(头像)里的变量里内容
    "$store.state.head_photo": {
      handler: function (newVal, oldVal) {
        // console.log("变化后的值",newVal)
        // console.log("变化前的值",oldVal)

        // 变化后的值赋给url
        this.url = newVal;
        this.srcList.push(newVal);
      },
      deep: true,
    },

    // 监听$store.state.login_state(登录状态)里的变量里内容
    "$store.state.login_state": {
      handler: function (newVal, oldVal) {
        console.log("变化后的值", newVal);
        console.log("变化前的值", oldVal);

        // 如果里面值不为空
        if (newVal != null) {
          this.pd = false;
        }
      },
      deep: true,
    },

    // 监听测试
    content(newVal, oldVal){
      console.log("变化后的值", newVal);
        console.log("变化前的值", oldVal);
    }
  },
  
};
</script>
<style lang="scss">
.demo-image__preview {
  display: flex;
  align-items: center;
  > span {
    margin-left: 10px;
    font-size: 14px;
    cursor: pointer;
  }
  > span:hover {
    color: #ff6e6e;
  }
}

.el-menu>.el-menu-item>a:hover{
color: #ff6e6e;
}

</style>
<style lang="scss" scoped>
* {
  font-size: 16px;
}
.tx_01 {
  position: absolute;
  left: 1056px;
  top: 50%;
  transform: translateY(-50%); /* 50%为自身尺寸的一半 */
  z-index: 50;
  user-select: none;
}
.input_01 {
  position: absolute;
  top: 20px;
  z-index: 50;
}
.but_02 {
  position: absolute;
  top: 30px;
  right: 0px;
  z-index: 50;
}
.my-header {
  box-shadow: 0 4px 9px 1px rgb(0 0 0 / 10%);
  background: #fff;
  position:sticky;
  top: 0px;
  z-index: 100;
}
.bj_01 {
  width: 100%;
  height: 82px;
  margin: 0 auto;
  background-color: transparent;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 10;
}
.sea {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 36px;
  //  margin-left:46px;
  position: absolute;
  // top: 20px;
  top:31px;
  left: 927px;
  z-index: 50;
  user-select: none;
}
// 悬停事件
.sea:hover {
  color: #ff6e6e;
}
.sea:hover .el-icon-search {
  color: #ff6e6e;
}
.el-menu--horizontal > .el-menu-item {
  color: #000;
  font-size: 16px;
}
.top_nav >ul>.el-menu-item:hover{
  color: #ff6e6e;
}
.el-submenu__title > a:hover {
  color: #ff6e6e;
}

.zi1 {
  font-size: 14px;
  margin-left: 6px;
}
.top_searchbox {
  width: 882px;
  // height: 50px;
  height: 61px;
  overflow: hidden;
  // display: none;
}
.el-button--danger.is-plain {
  background-color: #fff;
  border-color: #ff6e6e;
  color: #ff6e6e;
}
.el-button--small.is-round{
  padding: 8px 13px;
  font-size: 14px;
}
.top_nav2 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top_search {
  display: flex;
  //  align-items: center;
  cursor: pointer;
}

.el-menu.el-menu--horizontal {
  border: none;
}
.top_nav {
  // display: none;
  margin-left: 20px;
  user-select: none;
  // transform: translateY(-13px);
}
.items {
  z-index: 40;
  top: -19px;
  left: 81px;
}
.center_outer {
  width: 1200px;
  margin: 0 auto;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  padding-top: 14px;
  padding-bottom: 14px;
  position: relative;
}

.el-icon-search {
  color: lightgray;
  font-size: 24px;
}
.sousuo {
  color: black;
}
.bianse {
  line-height: 60px;
  font-size: 14px;
}

.bianse .el-icon-search:hover,
.sousuo:hover {
  color: #ff6e6e;
}
.el-button:focus,
.el-button:hover {
  color: black;
  background-color: white;
}

.is-round {
  border: 1px solid #ff6e6e;
  color: #ff6e6e;
}
.is-round:hover {
  color: white;
  background-color: #ff6e6e;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid rgb(255, 110, 110);
  color: #303133;
}

.active1 {
  background-color: #ff6e6e;
  border-radius: 50px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  height: 40px;
  width: 94px;
  user-select: none;
}
// 激活悬停事件
.active1:hover {
  color: #fff;
}
.active1:hover .el-icon-search {
  color: #fff;
}
.active2 {
  color: #fff;
  font-size: 17px;
  user-select: none;
}
.active3 {
  animation: move 0.3s linear forwards;
}
.active4 {
  display: none;
}
.active5 {
  animation: move2 0.3s linear forwards;
}
@keyframes move {
  0% {
    transform: translate(0,12px);
  }
  100% {
    transform: translate(-765px,12px);
  }
}
@keyframes move2 {
  0% {
    transform: translate(-400px);
  }
  100% {
    transform: translate(0);
  }
}
</style>